let map = {
    ball: {
        className: 'c-ball',
        textContent: '小球',
        onClick:(item) => {
            console.log('小球', item);
        }
    },
    square: {
        className: 'c-rec',
        textContent: '正方形',
        onClick:(item) => {
            console.log('正方形', item);
        }
    },
    triangle: {
        className: 'c-t',
        textContent: '三角形',
        onClick:(item) => {
            console.log('三角形', item);
        }
    },
    rectangle: {
        className: 'c-rec-a',
        textContent: '矩形',
        onClick:(item) => {
            console.log('矩形', item);
        }
    },
}


function createElement(item) {
    const validTypes = Object.keys(map);
    console.log("7777 ---- file: index.js:35 ---- validTypes---->", validTypes)
    if(!validTypes.includes(item.type)) {
        throw new Error('无效类型 invalid type')
    }   
    const div = document.createElement('div')
    div.className = 'item';
    div.classList.add(map[item.type].className);
    div.textContent = map[item.type].textContent;
    div.addEventListener('click', map[item.type].onClick)
    div.style.background = 'red'
    console.log("7777 ---- file: index.js:44 ---- div---->", div)
    return div
}

let dom1 = createElement({
    type: 'square' 
}) 

document.body.appendChild(dom1)

let dom2 = createElement({
    type: 'triangle' 
}) 

document.body.appendChild(dom2)
